.el-row {

    // 因为el-col使用了float实现多列在一行的效果,因此父级需要清除浮动
    &::after,
    &::before {
        display: block;
        content: "";
    }

    &::after {
        clear: both;
    }

    // 1.将row组件变为flext
    // 2.由于el-col使用了float,开启flex布局后,子元素的float会失效,需要将之前清除浮动的代码这是为display:none
    &--flex {
        display: flex;

        &::after,
        &::before {
            display: none;
        }

        &.is-justify-end {
            justify-content: flex-end;
        }

        &.is-justify-center {
            justify-content: center;
        }

        &.is-justify-space-between {
            justify-content: space-between;
        }

        &.is-justify-space-around {
            justify-content: space-around;
        }

        &.is-align-middle {
            align-items: center;
        }

        &.is-align-bottom {
            align-items: flex-end;
        }
    }
}